<style lang="less">
</style>

<template>
    <div>
        <Card shadow>
            <p slot="title" style="height: 33px">
                <Form :label-width="120">
                    <Row>
                        <Col span="4">
                            <FormItem label="起始时间：">
                                <DatePicker v-model="condition.startTime" transfer format="yyyy-MM-dd" type="date" placeholder="" @on-change="changeStartTime"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem label="结束时间：">
                                <DatePicker v-model="condition.endTime" transfer format="yyyy-MM-dd" type="date" placeholder="" @on-change="changeEndTime"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </p>
            <Row gutter="2">
                <Col span="4">
                    <Card style="background-color: #e9eaec;height: 100px">
                        <p style="color: #0C0C0C">总金额：{{data.total}}</p>
                    </Card>
                </Col>
                <Col span="4">
                    <Card style="background-color: #e9eaec;height: 100px">
                        <p style="color: #0C0C0C">现金：{{data.cash}}</p>
                    </Card>
                </Col>
                <Col span="4">
                    <Card style="background-color: #e9eaec;height: 100px">
                        <p style="color: #0C0C0C">银行卡：{{data.bank}}</p>
                    </Card>
                </Col>
                <Col span="4">
                    <Card style="background-color: #e9eaec;height: 100px">
                        <p style="color: #0C0C0C">支付宝：{{data.alipay}}</p>
                    </Card>
                </Col>
                <Col span="4">
                    <Card style="background-color: #e9eaec;height: 100px">
                        <p style="color: #0C0C0C">微信：{{data.wechat}}</p>
                    </Card>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
import iviewTable from '@/view/common/table/Table.vue';
import iviewPage from '@/view/common/page/Page.vue';
import memberList from '@/view/business/member/MemberList.vue';
import Table from "../common/table/Table";
export default {
    name: 'text-editor',
    components: {
        Table,
        iviewTable,
        iviewPage,
        memberList
    },
    data () {
        return {
            baseURL: '/user/statistics/income',
            data: {},
            condition: {
                startTime: '',
                endTime: ''
            }
        };
    },
    methods: {
        search () {
            let url = this.baseURL + '/search'
            this.$ajax.post(url, this.condition).then(r => {
                let {code, data, msg} = r.data
                if (code === 0) {
                    this.data = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        changeStartTime (val, t) {
            if (val && val !== '') {
                this.condition.startTime = val + ' 00:00:00'
            } else {
                this.condition.startTime = ''
            }
            this.search()
        },
        changeEndTime (val, t) {
            if (val && val !== '') {
                this.condition.endTime = val + ' 23:59:59'
            } else {
                this.condition.endTime = ''
            }
            this.search()
        },
        init () {
            this.search()
        }
    },
    mounted () {
        this.init()
    },
    watch: {
        '$route' (to) {
            if (to.path === '/statistics/income') {
                this.init()
            }
        }
    }
}
</script>

<style>

</style>
